@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-size: 16px;
    font-family: 'Microsoft YaHei', 'SimHei', 'STHeiti Light', '黑体', '微软雅黑', SimSun, '宋体', sans-serif;
  }

  ol {
    list-style-type: decimal;
    @apply p-4
  }


  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-xl;
  }

  input {
    @apply outline-none;
  }
}

/* @layer components {
  .tab li {
    @apply pt-5;
  }
} */

@layer utilities {
  .tab li {
    @apply pt-5;
  }

  .underline-hover {
    position: relative;
  }

  .underline-hover::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: skyblue;
    transition: width 0.5s ease;
  }

  .activeTab::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: skyblue;
  }

  .underline-hover:hover::before {
    width: 100%;
  }

  .sonTab {
    display: none;
  }

  .fatherTab:hover .sonTab {
    display: block;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin {
    animation: spin 2s linear infinite;
  }
}